import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { actionCreators } from './store';

import { Link } from 'react-router-dom';
import { Grid } from '@alifd/next';
import './style.scss';

const { Row, Col } = Grid;

class WorkList extends PureComponent {
  render() {
    const { workData } = this.props;

    return (
      <div className="container">
        <div className="title">作品展示</div>
        <div className="line" />
        <p className="desc">持续更新中</p>
        <div className="content">
          <Row wrap gutter={20}>
            {workData.map((item, index) => {
              // 作品卡片样式需要展示的内容：
              // "workId": "5cbdc6cc257c2b6020c17991",
              // "workName": "区块链详解",
              // "workDesc": "区块链简介、特征及分类、区块链网络、数据结构、核心问题、应用现状、前景展望。",
              // "authorName": "袁家立",
              // "createTime": "2019-04-22T14:31:01.000+0000",
              // "workFormat": "PPT",
              // "workType": "区块链",
              // "tags": "区块链",
              // "price": 5,
              return (
                <Col xl="6" l="8" m="12" xs="24" key={index}>
                  {/* 点击跳转到对应作品的详情页 */}
                  <Link to={'/partner/workId=' + item.workId}>
                  <div className="blockWrapper">
                    <div className="blockDetail">
                      <div className="blockTitle"> {item.workName} </div>
                      <div className="blockItem">
                        <label className="blockLable"> 作者 </label>
                        <div className="blockDesc"> {item.authorName} </div>
                      </div>
                      <div className="blockItem">
                        <label className="blockLable"> 作品领域 </label>
                        <div className="blockDesc"> {item.workType} </div>
                      </div>
                      <div className="blockItem">
                        <label className="blockLable"> 作品格式 </label>
                        <div className="blockDesc"> {item.workFormat} </div>
                      </div>
                      <div className="blockItem">
                        <label className="blockLable"> 作品简介 </label>
                        <div className="blockDesc"> {item.workDesc} </div>
                      </div>
                      <div className="blockTime">
                        <div className="blockCreateTime">生成时间：{item.createTime} </div>
                      </div>
                    </div>
                  </div>
                  </Link>
                </Col>
              );
            })}
          </Row>
        </div>
      </div>
    );
  }

  // 从后台获取数据 get http://localhost:9080/work/all?start=0&length=20
  componentDidMount() {
    this.props.getWorkData();
  }
}

const mapState = (state) => ({
  workData: state.getIn(['works', 'workData']).toJS()
});

const mapDispatch = (dispatch) => ({
  getWorkData() {
    dispatch(actionCreators.getWorkData());
  }
});

export default connect(mapState, mapDispatch)(WorkList);